.in-page-nav{
	padding: 94px;
}

.in-page-nav.in-page-nav-compact{
	padding: 0px 2.25rem;
}

.in-page-nav.in-page-nav-semi-compact{
	padding: 2rem 2.25rem;
}

/* Align side with text-media component headlines */
@media (min-width: 768px) {
	.in-page-nav.in-page-nav-compact{
		padding: 0px calc(((50vw - 24px)* 0.125) + 2.25rem);
	}

	.in-page-nav.in-page-nav-semi-compact{
		padding: 2rem calc(((50vw - 24px)* 0.125) + 2.25rem);
	}
}

.in-page-nav-semi-compact .material-symbols-outlined{
	color: var(--color-petrol-70);
	vertical-align: middle;
	font-size: 2.1rem;
	padding-inline-end: 1.25rem;
}

.in-page-nav-headline-container{
	align-items: center;
	display: flex;
	margin-bottom: 16px;
}

h4.in-page-nav__header-compact{
	font-size: 1.25rem;
    display: inline-block;
    padding-inline-end: 1.25rem;
}

.in-page-nav-headline-container .material-symbols-outlined{
	font-size: 36px;
	margin-right: 12px;
	color: var(--color-petrol-70);
}

.in-page-nav-headline-container h4{
	margin: 0;
	color: var(--color-petrol)
}

.cta-badge{
	display: inline-block;
	text-decoration: none;
	border-bottom: none;
	background: white;
	padding: 14px 10px;
	border-radius: 6px;
	font-family: Lexend Deca;
	font-size: 16px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0.5px;
	text-align: left;
	border-bottom: none !important;
	margin-right: 20px;
}

main .in-page-nav a.cta-badge{
	color: var(--color-petrol);
}

.cta-badge-container{
	text-wrap: pretty;
	line-height: 64px;
}

.brand-color-background-white .cta-badge {
	border: 2px solid var(--color-petrol) !important;
}

.brand-color-background-petrol .in-page-nav-headline-container h4,
.brand-color-background-petrol .in-page-nav-headline-container .material-symbols-outlined,
.brand-color-background-yellow .in-page-nav-headline-container .material-symbols-outlined,
.brand-color-background-blue .in-page-nav-headline-container h4,
.brand-color-background-blue .in-page-nav-headline-container .material-symbols-outlined {
	color: inherit;
}

main .in-page-nav a.cta-badge:hover {
    color: var(--color-petrol-50);

}


@media screen and (max-width: 660px) {
	.cta-badge-container{
    	display: flex;
	    flex-direction: column;
    	gap: 12px;
	}

	.cta-badge{
    	margin-right: 0;
	    font-size: 14px;
    	padding: 10px;
	}

	.in-page-nav{
		padding: 24px;
	}
}